<!-- 项目管理 -->
<template>
  
    <div class="page-box h100 display-flex czbj">
      <dxtable
        :dataJson="dataJson"
        :portUrl="portUrl"
        :formJson="formJson"
        :qx="qx"
        ref="databale"
        :headBtn="headBtn"
      ></dxtable>
  
      <n-modal v-model:show="showModal" preset="card" class="zcxxzcvssdfrs">
        <!-- <template #header>
          <div></div>
          </template> -->
        <div class="zxcxzcsrerr">
       
      <n-tabs type="line" animated>
  
          
          <n-tab-pane name="病例专栏" >
          <CaseColumn :pup="2" @callBack="pupcallBack" :zfleix="cz.typesder"></CaseColumn>
        </n-tab-pane>
          <n-tab-pane name="活动列表" >
          <managementActivities :pup="2" @callBack="pupcallBack" :zfleix="cz.typesder"></managementActivities>
        </n-tab-pane>
  
          <n-tab-pane name="产品列表" >
          <productManagement :pup="2" @callBack="pupcallBack" :zfleix="cz.typesder"> </productManagement>
        </n-tab-pane>
        <n-tab-pane name="作品一览" >
          <ListOfWorks :pup="2" @callBack="pupcallBack" :zfleix="cz.typesder"></ListOfWorks>
        </n-tab-pane>
      </n-tabs>
  
  
  
       
        </div>
        <template #action>
          <div class="tr">
            <n-button @click="showModal=false"> 关闭 </n-button>
          </div>
        </template>
      </n-modal>
    </div>
  </template>
  <script lang="ts" setup>
  import dxtable from "../../../components/util/dxtable.vue";
  import sort from "../../../components/util/sort.vue";
  
  import ListOfWorks from "../erqi/ListOfWorks.vue";
  import productManagement from "../productManagement.vue";
  import managementActivities from "./managementActivities.vue";
  import CaseColumn from "../CaseColumn.vue";
  
  import dz from "../dz.vue";
import plgl from "../plgl.vue";
  import { dxget, dxpost, qurl } from "../../../util/index";
  import { NButton, NImage, NTag } from "naive-ui";
  import { h, ref, reactive, render } from "vue";
  const databale = ref();
  const showModal = ref(false);
  let portUrl = "xjyx/zidingyifl/zidingyifl"
  const cz = qurl()
  if(cz.typesder){
    portUrl = "xjyx/zidingyifl/zidingyifl?zfleix="+cz.typesder
  }
  // let props = defineProps({
  //   zfleix: { type: String},
  // })
  const initeer = () => {
    databale.value.initDataExpose();
  };


  defineExpose({
      initbas(){
        initeer()
      }
  })
  let dataJson = [
    {
      title: "封面",
      type: "img",
      val: "",
      icon: "dx-img",
      span: 12,
      key: "cover",
      width: "80",
      search: false,
      istable: true,
      required: false,
    },
    {
      title: "标题",
      type: "input",
      val: "",
      icon: "dx-shurukuang",
      span: 24,
      key: "title",
      width: "",
      search: true,
      istable: true,
      required: false,
    },
  
    {
      title: "跳转地址",
      type: "input",
      val: "",
      icon: "dx-shurukuang",
      span: 24,
      key: "url",
      width: "",
      search: false,
      istable: true,
      required: false,
      render(row) {
          return h('div',{class:"dian"},row.url)
      }
    },
    {
    title: "点赞基数",
    key: "dianzan",
    width: 100,
    render(row) {
      return h(dz, {
        row,
        api:portUrl,
        keyName:"dianzan",
        onCallBack: () => {
          initeer();
        },
      })
      
    }
  }, {
    title: "收藏基数",
    key: "scjs",
    width: 100,
    render(row) {
      return h(dz, {
        row,
        api:portUrl,
        keyName:"scjs",
        onCallBack: () => {
          initeer();
        },
      })
      
    }
  },

    {
      title: "添加时间",
      key: "addTime",
      width: 150,
    },
  ];
  
  const headBtn = [
    {
      name: "从全部库里添加",
      jy: true,
      type: "info",
      clickFun: async (calld) => {
          showModal.value = true
      },
    },
  ];
  
  const pupcallBack= ()=>{
      showModal.value = false
      initeer()
  }
  
  const qx = {
    DeletePermissionID: "zidingyifldel", //删除
    EditPermissionIdentifier: "zidingyiflbj", // 编辑
    NewPermissionIdentifier: "", // 新建
    ViewPermissionID: "zidingyiflck", // 查看
  };

  
  let formJson = reactive([
    {
      title: "标题",
      type: "input",
      val: "",
      icon: "dx-shurukuang",
      span: 24,
      key: "title",
      width: "",
      search: false,
      istable: true,
      required: true,
    },
    {
      title: "封面",
      type: "img",
      val: "",
      icon: "dx-img",
      span: 12,
      key: "cover",
      width: "",
      search: false,
      istable: true,
      required: true,
    },
    {
      title: "跳转地址",
      type: "input",
      val: "",
      icon: "dx-shurukuang",
      span: 24,
      key: "url",
      width: "",
      search: false,
      istable: true,
      required: true,
    },  {
  
      val: cz.typesder,
      key: "zfleix",
    },


    
  ]);
  const czFun = {
    fun: (row) => {
      return [
        h(
          NButton,
          {
            type: "info",
            quaternary: true,
            onClick: async (e) => {},
          },
          "复制代码"
        ),
      ];
    },
  };
  
  // 获取字典内容
  // const xtgxxmfl = async () => {
  //   const { data }: any = await dxget("dxgjAdmin/getzd", { name: 'xtgxxmfl' })
  //   dataJson[2].options = [
  //     {
  //       label: "全部",
  //       value: ""
  //     },
  //     ...data
  //   ]
  //   formJson[2].options = data
  //   xmlxSelect.value = data
  //   console.log(data);
  // }
  // xtgxxmfl()
  </script>
  <style scoped>
      .zxcxzcsrerr{
          min-height: 700px;
      }
  </style>
  